"use client";
import "./introduce.css";
import React from "react";
import { useState, useEffect, useCallback } from "react";
import { Image } from "antd";
import classNames from "classnames";
import { useRouter } from "next/navigation";

export default function Introduce({ params }:{params:{id:string}}) {
  const [selected, setSelected] = useState("21");
  const [areaTitle, setAreaTitle] = useState("集团简介");
  const router = useRouter();
  useEffect(() => {
    changePage(params.id)
  }, []);
  const changePage = useCallback((select: string) => {
    setSelected(select);
    switch (select) {
      case "21":
        setAreaTitle("集团简介");
        break;
      case "22":
        setAreaTitle("发展历程");
        break;
      case "23":
        setAreaTitle("企业架构");
        break;
      case "24":
        setAreaTitle("资质荣誉");
        break;
      case "25":
        setAreaTitle("企业文化");
        break;
      case "26":
        setAreaTitle("领导团队");
        break;
    }
  }, []);
  return (
    <div className="content">
      <div className="introduce_header">
        <div className="header_title">集团概况</div>
        <div className="header_sub">Group Profile</div>
      </div>
      <div className="content_area">
        <div className="navigation_left">
          <div className="header_center">
            <Image
              src="/assets/header/sub/jtgk.svg"
              width={"100%"}
              preview={false}
              alt=""
            ></Image>
          </div>
          <div
            className={classNames(
              selected === "21"
                ? "navigation_selected"
                : "navigation_select"
            )}
            onClick={() => changePage("21")}
          >
            集团简介
          </div>
          <div
            className={classNames(
              selected === "26"
                ? "navigation_selected"
                : "navigation_select"
            )}
            onClick={() => changePage("26")}
          >
            领导团队
          </div>
          <div
            className={classNames(
              selected === "22"
                ? "navigation_selected"
                : "navigation_select"
            )}
            onClick={() => changePage("22")}
          >
            发展历程
          </div>
          <div
            className={classNames(
              selected === "23"
                ? "navigation_selected"
                : "navigation_select"
            )}
            onClick={() => changePage("23")}
          >
            企业架构
          </div>
          <div
            className={classNames(
              selected === "24"
                ? "navigation_selected"
                : "navigation_select"
            )}
            onClick={() => changePage("24")}
          >
            资质荣誉
          </div>
          <div
            className={classNames(
              selected === "25"
                ? "navigation_selected"
                : "navigation_select"
            )}
            onClick={() => changePage("25")}
          >
            企业文化
          </div>
        </div>
        <div className="table_area">
          <div className="area_header">
            <div className="area_title">{areaTitle}</div>
          </div>
          {selected === "21" && (
            <div className="introduce_area">
              <Image
                alt=""
                width={"100%"}
                preview={false}
                src="/assets/introductory/jtjj.svg"
              />
            </div>
          )}
          {selected === "22" && (
            <div className="introduce_area">
              <Image
                alt=""
                width={"100%"}
                preview={false}
                src="/assets/introductory/fzlc.svg"
              />
            </div>
          )}
          {selected === "23" && (
            <div className="introduce_area">
              <Image
                alt=""
                width={"100%"}
                preview={false}
                src="/assets/introductory/qyjg.svg"
              />
            </div>
          )}
          {selected === "24" && (
            <div className="introduce_area">
              <Image
                alt=""
                width={"100%"}
                preview={false}
                src="/assets/introductory/zzry.svg"
              />
              <Image
                alt=""
                width={"100%"}
                preview={false}
                src="/assets/introductory/zzry.webp"
                style={{
                  width: "855px",
                }}
              />
            </div>
          )}
          {selected === "25" && (
            <div className="introduce_area">
              <Image
                alt=""
                width={"100%"}
                preview={false}
                src="/assets/introductory/qywh.svg"
              />
            </div>
          )}
        </div>
      </div>
    </div>
  );
}
